<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.1.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/upload.js?v=1.3"></script>


</head>
<body>

<div id="app">
    <table style="width: 100%;">
        <tr>
            <td width="40%">
                <div id="transfer"></div>
            </td>

            <td width="60%">
                <table id="demo" lay-filter="test"></table>
            </td>
        </tr>
    </table>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs"  lay-event="edit">设置</a>
    </script>

</div>





<script>
    var form = null;
    var $ = null;
    var upload = null;
    var transfer = null;
    let table = null;

    var vueData = {
        inputColumns:[]//录入的字段
        ,formData:{}//提交数据库的值
    };
    var vm = new Vue({
        el: '#app',
        data: vueData,
        created(){
            this.init();
        },
        methods:{
            init(){
                //Demo
                layui.use(['form','jquery','upload','transfer','table'], function(){
                    form = layui.form;
                    $ = layui.jquery;
                    transfer = layui.transfer;
                    table = layui.table;

                    post("/admin/api/DataManagementController/listCustomPage",{zygl_id:top.data.tableId},function (res) {
                        //渲染
                        transfer.render({
                            elem: '#transfer'  //绑定元素
                            ,title:["未选择字段","已选择字段"]
                            ,showSearch:true
                            ,data: res.data.listAll
                            ,value:res.data.values
                            ,parseData: function(res){
                                return {
                                    "value": res.id //数据值
                                    ,"title": res.show_name //数据标题
                                    //,"disabled": res.disabled  //是否禁用
                                    //,"checked": res.checked //是否选中
                                }
                            }
                            ,onchange: function(data, index){//改变事件保存数据库
                                console.log(data); //得到当前被穿梭的数据
                                console.log(index); //如果数据来自左边，index 为 0，否则为 1
                                let param = {list:data,zygl_id:top.data.tableId,colType:top.data.custom,leftOfright:index};
                                var i = top.load();
                                postBody("/admin/api/DataManagementController/insertCustom",param,function (resobj) {
                                    top.layer.close(i);
                                    top.alert(resobj.msg);
                                    table.reload("idTest", {});
                                })
                            }
                        });
                    })


                    //可侧列表执行渲染
                    table.render({
                        id:"idTest",
                        elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
                        ,height: "full-50" //容器高度
                        ,cols:[[{checkbox: true},{field:"id",title:"字段id"},
                            {field:"show_name",title: "字段中文名称"}
                            ,{field: "col_name",title:"字段名称"}
                            ,{field: "col_type",title:"字段类型"}
                            ,{field: "list_width",title:"列表宽度"}
                            ,{field: "show_order",title:"排序号"}
                            ,{field: "right",title:"操作",toolbar: '#barDemo'}]] //设置表头
                        ,url:wwwurl+"/admin/api/DataManagementController/customRightList"
                        ,where:{zygl_id:top.data.tableId,colType:top.data.custom}
                        ,contentType: 'application/json'
                        ,method:"post"
                        ,page:true
                        ,toolbar: '.layui-btn-group'
                        ,request: {
                            pageName: 'pageNumber' //页码的参数名称，默认：page
                            ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
                        },
                        headers: {
                            token:localStorage.getItem("token")
                        }
                        ,parseData:function(res){
                            return {
                                "code": "0", //解析接口状态
                                "msg": res.msg, //解析提示文本
                                "count": res.data.total, //解析数据长度
                                "data": res.data.rows //解析数据列表
                            };
                        }
                        //,…… //更多参数参考右侧目录：基本参数选项
                    });

                    //工具条事件
                    table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                        var data = obj.data; //获得当前行数据
                        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                        var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

                        console.log(data);
                        if(layEvent === 'edit'){ //编辑
                            //do something
                            post("/admin/api/DataManagementController/getCustomDictForId",{colType:top.data.custom,id:data.id},function (resData) {
                                let btn = {btn: ['确定', '取消']
                                    ,yes: function(index, layero){
                                        console.log(layero);
                                        //按钮【按钮一】的回调
                                        var win = getTopIframe(layero);
                                        var selectData = win.getData();
                                        var i = top.layer.load();
                                        selectData.id = data.id
                                        postBody("/admin/api/DataManagementController/setColStyle", {mapdata:selectData,colType:top.data.custom},function (res) {
                                            top.layer.close(i);
                                            top.alert(res.msg);
                                            table.reload("idTest", {});
                                        })
                                    }
                                    ,btn2: function(index, layero){
                                        //按钮【按钮二】的回调
                                        //return false 开启该代码可禁止点击该按钮关闭
                                    }};
                                let urlhtml = "/admin/html/dataManagement/optionsSelectList.html";
                                top.f_layer_open_get(urlhtml,"30%","60%",function () {

                                },btn,"设置列表宽度",resData.data);
                            })


                        }
                    });


                    //监听锁定操作
                    form.on('checkbox(lockDemo)', function(obj){
                        layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
                    });
                });
            }
        },
        watch:{

        }
    })




</script>

</body>
</html>
